<template>
  <div class="draggle-table">
    <el-table v-loading="isLoading" :data="tableData" border>
      <el-table-column type="index" width="50" label="序号" fixed="left" align="center">
        <template slot="header">
          <span class="iconfont icon-a-shezhi" @click="showModal"></span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        min-width="190"
        :fixed="item.fixed"
        :label="item.title"
        v-for="item in cloneColumns"
        :key="item.key"
        :property="item.dataIndex">
        <template slot-scope="scope">
          <span v-if="item.key === 'no'">
            <router-link :to="`${linkDetail}?no=${scope.row.no}`">{{ scope.row.no }}</router-link>
          </span>
          <span v-else>
            {{ scope.row[item.key] }}
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-type">
      <el-pagination
        background
        layout="total, prev, pager, next, sizes, jumper"
        :total="pageLength">
      </el-pagination>
    </div>
    <a-modal v-model.trim="tableSetVisible" title="表格自定义" @ok="handleOk" class="order-modal">
      <span slot="closeIcon" class="iconfont icon-a-shanchu"></span>
      <div>
        <div>
          表格前<a-input :placeholder="PLACEHOLDER_INPUT" class="fixIpt" v-model.trim="fixedNum"/>列固定，不随横向滚动条拖拽移动
          <div class="mt20">
            <a-checkbox @change="onCheckAllChange" :checked="checkAll" :indeterminate="indeterminate">
              全选
            </a-checkbox>
          </div>
          <a-divider />
          <a-checkbox-group @change="onChangeCheckbox" v-model.trim="checkedList">
            <a-row>
              <a-col :span="6" v-for="check in checkList" :key="check.dataIndex">
                <a-checkbox :value="check.title">
                  {{ check.title }}
                </a-checkbox>
              </a-col>
            </a-row>
          </a-checkbox-group>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { PLACEHOLDER_INPUT } from "@/config/const";
export default {
  name: 'DraggableTable',
  data () {
    return {
      PLACEHOLDER_INPUT,
      checkedList: ['订单编号', '运单编号'],
      indeterminate: false,
      fixedNum: '',
      checkAll: false,
      tableSetVisible: false,
      cloneColumns: []
    }
  },
  computed: {
    pageLength() {
      return this.tableData.length
    }
  },
  props: {
    checkList: {
      type: Array,
      default() {
        return []
      }
    },
    columns: {
      type: Array,
      default() {
        return []
      }
    },
    tableData: {
      type: Array,
      default() {
        return []
      }
    },
    linkDetail: {
      type: String,
      default: ''
    },
    columnsList: {
      type: Array,
      default() {
        return []
      }
    },
    isLoading: {
      type: Boolean,
      default: false
    }
  },
  created() {
    this.columns.forEach(o => o.width = 190)
    this.cloneColumns = JSON.parse(JSON.stringify(this.columns));
  },
  mounted() {},
  methods: {
    showModal() {
      this.tableSetVisible = !this.tableSetVisible;
    },
    // 打开表头配置项
    onShowTableSet() {
      this.tableSetVisible = true;
    },
    onChangeCheckbox(checkedList) {
      this.indeterminate = !!checkedList.length && checkedList.length < this.checkList.length;
      this.checkAll = checkedList.length === this.checkList.length;
    },
    // 全选操作
    onCheckAllChange(e) {
      Object.assign(this, {
        checkedList: e.target.checked ? this.checkList.map(o => o.title) : [],
        indeterminate: false,
        checkAll: e.target.checked
      });
    },
    handleOk() {
      this.handleColumns()
      this.tableSetVisible = false;
    },
    handleColumns() {
      let arr = [];
      this.checkedList.forEach(v => {
        arr = [...arr, ...this.checkList.filter(o => v === o.title)]
      })

      // 针对表头固定的处理
      this.fixedColumns(arr)
    },
    fixedColumns(arr) {
      arr.forEach((o, i) => {
        i < this.fixedNum ? o.fixed = 'left' : delete o.fixed
      })
      this.cloneColumns = arr;
    }
  }
}
</script>

<style lang="less" scoped>
  .draggle-table {

    .order-table {
      width: 1476px;
    }

    .icon-a-shezhi {
      cursor: pointer;
    }

    ::v-deep .resize-table-th {
      position: relative;
      .table-draggable-handle {
        height: 100% !important;
        bottom: 0;
        left: -5px;
        right: auto !important;
        cursor: col-resize;
        touch-action: none;
        position: absolute;
      }
    }

    .page-type {
      display: flex;
      justify-content: flex-end;
      margin-top: 10px;
    }
  }

  .order-modal {
    max-width: 1500px;

    .fixIpt {
      width: 80px;
      margin: 0 10px;
    }

    ::v-deep .ant-modal-header {
      border-bottom: none;
    }

    ::v-deep .ant-modal-title {
      text-align: center;
      font-size: 18px;
      color: #26272A;
      font-family: PingFangSC-Medium, PingFang SC;
    }

    ::v-deep .ant-modal {
      width: 550px !important;
    }
  }
</style>
